<template>
<view class="page">
	<template v-if="isLogin">
		<view class="h45">
			<view class="fix-wrap"> 
				<view class="h45 limit-tab">
					<view :class="['item',{'active':status=='-1'}]" @click="getTypeList(-1)">
						<view class="name">全部</view>
						<view class="active-line"></view>
					</view>
					<view :class="['item',{'active':status==0}]" @click="getTypeList(0)">
						<view class="name">审核中</view>
						<view class="active-line"></view>
					</view>
					<view :class="['item',{'active':status==1}]" @click="getTypeList(1)">
						<view class="name">已审核</view>
						<view class="active-line"></view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="body">
			<view class="list-wrap">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				<template v-else>
					<template v-if="list.length>0">
						<view class="item" v-for="(item,index) in list" :key="index">
							<view class="info">
								<view class="time">上报时间：{{item.time}}</view> 								
							</view>
							<view class="btn-bar">
								<view v-if="item.status==0" class="status">审核中</view>
								<view v-if="item.status==1||item.status==2" class="status">已审核</view> 
								<view class="right">
									<navigator v-if="item.status==0" :url="'/package_yunshangbao/edit/edit?type='+type+'&id='+item.id" hover-class="none" class="btn detail">编辑</navigator>
									<navigator :url="'/package_yunshangbao/detail/detail?id='+item.id" hover-class="none" class="btn detail">详情<view v-if="item.status==2" class="point"></view></navigator>
								</view>
								
							</view>
						</view>
						<loading :loadingState="loadingState"></loading>
					</template>
					<empty v-else msg="暂无数据"></empty>
				</template>				
			</view> 
		</view>  
	</template>
	
	
</view>
</template>

<script> 
import loading from '@/components/loading-more.vue'
import empty from '@/components/empty.vue'
export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,
			userInfo:uni.getStorageSync('userInfo'),
			loginStateUpdate:false,
			status:-1,
			type:0,    // 0 周  1 月
			params:{ 
				page:1,
				start_time:'',   
				end_time:'',
				status:'',
				is_month:0
			},
			list:[],
			total:0,
			loadingState:{
				default:true,
				loading:false,
				completed:false
			}
		}
	},
	onShow() {
		
	},
	async onLoad(params) { 
		this.isLogin = await this.$loginState('check'); 
		this.type=params.type;
		if(this.type==1){
			this.params.is_month=1;
		}else if(this.type==0){
			this.params.is_month='';
		}
		if(this.isLogin){
			this.list=[];
			this.params.page=1; 
			this.loadingState.default=true;
			this.loadingState.loading=false;
			this.loadingState.completed=false;
			this.getList();
		}
	},
	onReachBottom(){
		if(this.loadingState.completed){
			this.params.page=1;
			return false
		}else{
			if(this.list.length<this.total&&this.list.length>0){
				this.params.page++;
				this.getList();
			}
		}	 
	},
	methods:{
		// 类型切换
		changeType:function(type){
			this.type=type;
			if(type==1){
				this.params.is_month=1;
			}else if(type==0){
				this.params.is_month='';
			}
			this.list=[];
			this.params.page=1; 
			this.loadingState.default=true;
			this.loadingState.loading=false;
			this.loadingState.completed=false;
			this.getList();
		},
		
		getTypeList:function(status){
			this.status=status; 
			if(status==-1){
				this.params.status='';
			}else{
				this.params.status=status;
			}		
			this.list=[];
			this.params.page=1; 
			this.loadingState.default=true;
			this.loadingState.loading=false;
			this.loadingState.completed=false;
			this.getList();
		},
		
		// 获取上报列表
		getList:async function(){
			let res=await this.$api.ysb_api.getList({
				page:this.params.page,
				start_time:this.params.start_time,   
				end_time:this.params.end_time,
				status:this.params.status,
				is_month:this.params.is_month
			})
			if(res.data.ret==0){
				this.loadingState.default=false;
				this.loadingState.loading=true;
				this.total=res.data.data.total;
				if(this.type==1){
					res.data.data.list.forEach(item=>{
						item.time=item.add_time.substr(0,7);
					})
				}else if(this.type==0){
					res.data.data.list.forEach(item=>{
						item.time="第"+item.week_num+"周 ("+item.week_start+"至"+item.week_end+")";
					})
				}
				
				this.list=this.list.concat(res.data.data.list);
				if(this.list.length>=this.total){
					this.loadingState.completed=true;
					this.loadingState.loading=false;
				} 
			}else if(res.data.ret==-1){
				this.loadingState.default=false;
			} 
		}
	},
	computed:{
		
	},
	components:{
		loading,
		empty
	}
}
</script>

<style lang="less" scoped>
	.list-wrap{
		padding: 20rpx 0 0 0;
		.item{			
			padding:20rpx;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			.btn-bar{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.status{
					font-size: 30rpx; 
					color:#f00;
				}
				.right{
					display: flex;
				}
				.btn{
					position: relative;
					padding:2rpx 20rpx;					
					border-radius: 10rpx;					
					font-size: 30rpx;
				}
				.detail{
					margin-left:20rpx;
					border:2rpx solid #e96b5c;
					color:#e96b5c;
					.point{
						position: absolute;
						right:-10rpx;
						top:-10rpx;
						width: 20rpx;
						height: 20rpx;
						background: #ff9600;
						border-radius: 50%;
					}
				}
			}
			
			.info{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:0 0 20rpx 0; 
				margin-bottom: 20rpx;
				border-bottom: 1rpx solid #ddd;
				.time{ 
					font-size: 32rpx;
				}				
			}
		}
	}
</style>
